<template>
  <g-form-wrap :title="des" :optBtnText="'添加' + des" @opt-btn-func="optBtnFunc">
    <el-form
      label-position="left"
      label-width="140px"
      inline
    >
     <el-table :data="dicItemList" style="width: 100%">
        <el-table-column fixed prop="id" label="ID" />
        <el-table-column prop="nameCn" width="200px;" label="中文名称" />
        <el-table-column prop="nameEn" width="200px;" label="英文名称" />
        <el-table-column prop="code" label="编码" />
        <el-table-column prop="sort" label="排序"/>
        <el-table-column prop="status" label="状态">
         <template #default="scope">
            <el-tag v-if="scope.row.status == 1" class="ml-2" type="success">有效</el-tag>
            <el-tag v-else class="ml-2" type="danger">无效</el-tag>
         </template>
        </el-table-column>
        <el-table-column prop="createTime" width="180px;" label="创建时间"/>
        <el-table-column prop="updateTime" width="180px;" label="更新时间"/>
        <el-table-column prop="updater" label="更新人"/>
        <el-table-column fixed="right" label="操作" width="120px;">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="editItemFunc(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.status == 1" link type="danger" size="small" @click="delItemDunc(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </g-form-wrap>

  <g-dialog
    v-model:dialog-visible="dialogVisible"
    :title="(formData.id ? '编辑-' : '添加-') + des"
    width="650px"
    save-btn-text="提交"
    :click-sure-btn="onSaveBtnClick"
    >
      <el-form
        ref="ruleForm"
        :model="formData"
        :rules="formRules"
        label-position="right"
        label-width="140px"
        inline
      >
        <el-form-item label="中文名称：" prop="nameCn">
          <el-input
            v-model="formData.nameCn"
            placeholder="请输入中文名称"
            class="edit-item"
            clearable
          />
        </el-form-item>
        <el-form-item label="英文名称：" prop="nameEn">
          <el-input
            v-model="formData.nameEn"
            placeholder="请输入英文名称"
            class="edit-item"
            clearable
          />
        </el-form-item>
        <el-form-item label="类型：" prop="type">
          <el-input
            v-model="formData.type"
            placeholder="请输入类型"
            class="edit-item"
            disabled
          />
        </el-form-item>
        <el-form-item label="编码：" prop="code">
          <el-input-number
            v-model="formData.code"
            placeholder="请输入编码"
            class="edit-item"
            :disabled="formData?.id ? true : false"
          />
        </el-form-item>
        <el-form-item label="描述：" prop="des">
          <el-input
            v-model="formData.des"
            placeholder="请输入描述"
            class="edit-item"
            disabled
          />
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-input-number
            v-model="formData.sort"
            placeholder="请输入序号"
            class="edit-item"
            clearable
          />
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <g-select
            v-model="formData.status"
            placeholder="请选择状态"
            class="edit-item"
            :options="[{'id': 1, 'name': '有效'}, {'id': 2, 'name': '无效'}]"
            :filterable="true"
          />
        </el-form-item>
      </el-form>
  </g-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs, inject } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import type { Loading } from '@/components/Dialog/types'
import { useRoute, useRouter } from 'vue-router'
import elv from '@/utils/elValidation'
import { getDicByTypeApi, addDicApi, updateDicApi } from '@/api/system'
import { Page } from '@/types/storeModule'
import { assign, cloneDeep, omit, replace } from 'lodash-es'

const route = useRoute()
const router = useRouter()
const isEditing = ref(false)
const ruleForm = ref<FormInstance>()
const dicItemList = ref<any>([])
const dialogVisible = ref(false)
const formData = ref(<
  {
    id: string | number
    nameCn: string
    nameEn: string
    type: string
    code: number
    des: string
    sort: number
    status: string | number
  }
>{
  id: 0,
  nameCn: '',
  nameEn: '',
  type: '',
  code: 1,
  des: '',
  sort: 1,
  status: 1
})
const formRules = reactive<FormRules>({
  nameCn: [{ required: true, message: '请输入中文名称', trigger: 'change' }],
  code: [{ required: true, message: '请输入编码', trigger: 'change' }],
})
const id = route.query.id as string | number;
const des = route.query.des as string;
const type = route.query.type as string;
isEditing.value = id > 0 ? true : false;
// 编辑时
const getDicByTypeFunc = async () => {
  const data = await getDicByTypeApi({type: type});
  dicItemList.value = data;
}
if (isEditing.value) {
  getDicByTypeFunc();
}

const editItemFunc = async (row) => {
  dialogVisible.value = true;
  if(row) formData.value = row;
} 

// 保存提交
const onSaveBtnClick = (loading: Loading) => {
  ruleForm.value?.validate((valid) => {
    if (valid) {
      loading(true)
      if (isEditing.value) {
        updateDicApi(formData.value).then((res) => {
          if(res*1 === 200) ElMessage.success('编辑成功')
        })
      } else {
        addDicApi(formData.value).then((res) => {
          if(res*1 === 201) ElMessage.success('添加成功')
        })
      }
      setTimeout(() => {
        loading(false)
        router.go(0)
      }, 100)
    } else {
      return false
    }
  })
}

const delItemDunc = (id) => {
  updateDicApi({id: id, status: 2}).then((res) => {
    if(res*1 === 200)
      ElMessage.success('删除成功')
      router.go(0)
  })
}

const optBtnFunc = () => {
  dialogVisible.value = true;
  formData.value = {
    id: 0,
    nameCn: '',
    nameEn: '',
    type: type,
    code: 1,
    des: des,
    sort: 1,
    status: 1
  }
  isEditing.value = formData.value.id > 0 ? true : false;
}

</script>